<template>
    <div v-loadmore='loadmore' class="container">
        <headNav title="套餐记录"></headNav>

        <div class="order-list">
            <div v-for="(item, index) in orderData" :key="index" class="order-item">
                <div class="tr">
                    <div class="td-key">单号：</div>
                    <div class="td-val">{{item.Id}}</div>
                </div>
                <div class="tr">
                    <div class="td-key">内容：</div>
                    <div class="td-val">
                        <div v-if="item.OrderType == 1">{{item.PackageName}}</div> 
                        <div v-else>{{item.Minute}}分钟通话时间</div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td-key">名称：</div>
                    <div class="td-val">{{item.ChargeName}}</div>
                </div>
                <div class="tr">
                    <div class="td-key">时间：</div>
                    <div class="td-val">{{item.CreateTime | formatDateTime('YYYY-MM-dd HH:mm')}}</div>
                </div>
                <div class="line"></div>
                <div class="bott">

                    <div v-show="item.Static == 1" class="payed">已经支付</div>

                    <div @click="pay(item)" v-show="item.Static == 2" class="pay-btn">继续支付</div>
                    <div v-show="item.Static == 2" class="wait-pay">待支付</div>
                   

                    <div v-show="item.Static == 3" class="pay-fail">支付失败</div>
                    <div v-show="item.Static == 4" class="pay-fail">订单异常</div>


                    <div class="money">¥ {{item.OrderMoney}}</div>
                </div>
            </div>

            <load-more v-if="isMore" :show-loading="true" :tip="'加载中'" background-color="#fbf9fe"></load-more>
            <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav';
import { LoadMore} from 'vux'
import {getCookie} from '@/util/tool'
export default {
    components: {
      headNav, LoadMore
    },
    computed: {
        studentId () {
            return this.$store.state.user.studentId
        },
    },
    data () {
        return {
            orderData: [],
            pageNum: 1,
            pageSize: 5,
            isMore: true
        }
    },
    methods: {
        loadmore () {
            if (!this.isMore) {
                return
            }
            this.pageNum ++
            this.getList(this.pageNum)
        },
        getList (pageNum) {
            this.pageNum = pageNum
            var paramsNew = {
				  StudentId: this.studentId,
                  Index: this.pageNum,
                  Size: this.pageSize
            }
          
            this.$store.dispatch('vip/GetOrderList', paramsNew).then(res => {
                
                var result = JSON.parse(res)
               
                if(result.Code == 200){
                    var data = result.Data
                    this.orderData = this.orderData.concat(data) 
                    if (data.length >= this.pageSize) {
                        this.isMore = true
                    } else {
                        this.isMore = false
                    }
                }
            })
        },
        pay (item) {
            let params = {
                orderId: item.Id,
                payType: 2,
                openId: getCookie('OpenId')
            }
            debugger
            this.$store.dispatch('vip/ContinueToPay', {data: JSON.stringify(params)}).then(res => {
                debugger
                 var result = JSON.parse(res)
                 if(result.Code==200){
                     var orderId = result.Data.orderId
                    if(result.Data.payUrl.Code==500){
                        this.$vux.toast.show({
                            text:result.Data.payUrl.Msg,
                            type:'cancel',
                            time:2000
                        })
                    } else {
                        var payUrl = result.Data.payUrl.Data.data
                        var appId = payUrl.jsapi_appid
                        var timeStamp = payUrl.jsapi_timestamp
                        var nonceStr = payUrl.jsapi_noncestr
                        var pack = payUrl.jsapi_package
                        var signType = payUrl.jsapi_signtype
                        var paySign = payUrl.jsapi_paysign
                        
                        WeixinJSBridge.invoke('getBrandWCPayRequest', 
                            {
                                "appId":appId,     //公众号名称，由商户传入     
                                "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数     
                                "nonceStr":nonceStr, //随机串     
                                "package":pack,     
                                "signType":signType,         //微信签名方式：     
                                "paySign":paySign //微信签名 
                            },
                            function(res){ 
                                if(res.err_msg == "get_brand_wcpay_request:ok" ){

                                } else {
                                   
                                }
                            }
                        )
                    }
                    
                }
            })
        }
    },
    mounted () {
        this.getList(1)
    }
}
</script>
<style scoped>
.container{

}
.order-list{

}
.order-item{
    margin: 0.23rem auto; width:6.74rem; box-sizing: border-box;color: #1B1F27;
    padding: 0.2rem; background: #fff; border-radius: 0.15rem;
    box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.3);
}
.tr{
    font-size: 0.28rem; padding: 0 0 0.2rem  0;
}
.td-key{
    display: inline-block; vertical-align: middle; width: 0.85rem;
}
.td-val{
    display: inline-block; vertical-align: middle;width: 5.2rem;
}
.line{
    border-top: 1px solid #E5E5E5;
}
.bott{
    padding: 0.3rem 0 0.1rem 0;
}
.payed{
    font-size: 0.3rem; float: right;
}
.wait-pay{
    font-size: 0.3rem; color: #FF8800;  float: right;
}
.pay-btn{
    width: 1.7rem; height: 0.58rem; line-height: 0.58rem;
    text-align: center; color: #fff; background: #128FEF; border-radius: 0.3rem;
     float: right; margin: 0 0 0 0.5rem;
         position: relative;
    top: -0.05rem;
}
.pay-fail{
    font-size: 0.3rem; color: #FF3000;  float: right;
}
.money{
    font-size: 0.4rem;
}
</style>
